<template>
  <div>
    <page-header></page-header>

    <page-main background="transparent" padding="0px">
      <div class="chunk">
        <div class="user-info">
          <el-avatar :size="60" :src="userInfo.avatar" @error="errorHandler">
            <img :src="imageErrorSrc" />
          </el-avatar>
        </div>
        <div class="descriptions"></div>
      </div>
      <div class="chunk">
        <el-tabs v-model="tabsCurrent" @tab-click="handleClick">
          <el-tab-pane label="用户信息" name="info">
            <div class="descriptions">
              <el-descriptions title="用户信息" :colon="false" extra="ceshi">
                <template slot="extra">
                  <div class="descriptions-extra overall-flex">
                    <el-link type="primary" :underline="false">编辑</el-link>
                    <el-link type="primary" :underline="false">取消</el-link>
                  </div>
                </template>

                <el-descriptions-item label="ID">
                  <div>
                    {{ userInfo.id }}
                    <el-link type="primary" :underline="false">复制</el-link>
                  </div>
                </el-descriptions-item>

                <el-descriptions-item label="用户名"
                  ><div>
                    {{ userInfo.username }}
                    <el-link type="primary" :underline="false">复制</el-link>
                  </div></el-descriptions-item
                >
                <el-descriptions-item label="性别">
                  <i class="el-icon-male"></i>
                  {{ userInfo.gender | handleGender }}
                </el-descriptions-item>
                <el-descriptions-item label="所在城市"
                  >学校</el-descriptions-item
                >
                <el-descriptions-item label="详细地址"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                >
              </el-descriptions>
            </div>
            <div class="descriptions">
              <el-descriptions title="联系方式">
                <el-descriptions-item label="手机号码">{{
                  userInfo.mobile
                }}</el-descriptions-item>
                <el-descriptions-item label="绑定微信"></el-descriptions-item>
                <el-descriptions-item label="绑定QQ"></el-descriptions-item>
                <el-descriptions-item label="绑定邮箱"></el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="descriptions">
              <el-descriptions title="联系方式">
                <el-descriptions-item label="最近登录时间">{{
                  userInfo.last_login_time | turnTime
                }}</el-descriptions-item>
                <el-descriptions-item label="最近登录IP">{{
                  userInfo.last_login_ip
                }}</el-descriptions-item>
                <el-descriptions-item label="登录IP地区"></el-descriptions-item>
                <el-descriptions-item label="注册时间">{{
                  userInfo.register_time | turnTime
                }}</el-descriptions-item>
                <el-descriptions-item label="注册IP">{{
                  userInfo.register_ip
                }}</el-descriptions-item>
                <el-descriptions-item label="注册IP地区"></el-descriptions-item>
              </el-descriptions></div
          ></el-tab-pane>
          <el-tab-pane label="安全管理" name="secure">安全管理</el-tab-pane>
          <el-tab-pane label="认证管理" name="ss">安全管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="role"
            ><el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="角色"></el-table-column>
              <el-table-column prop="address" label="操作">
                <el-link
                  type="danger"
                  @click="clickRemoveUser(scope.row, scope.$index)"
                  >删除</el-link
                >
              </el-table-column>
            </el-table></el-tab-pane
          >
          <el-tab-pane label="账号日志" name="log"
            ><el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日志类型" width="180">
                <template>
                  <el-tag>标签一</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="操作时间" width="180">
              </el-table-column>
              <el-table-column prop="address" label="事件说明">
              </el-table-column> </el-table
          ></el-tab-pane>
        </el-tabs>
      </div>
    </page-main>
  </div>
</template>
<script>
import pageMain from "~/page-main/page-main.vue";
import pageHeader from "~/page-header/page-header.vue";
import API from "@/api";
export default {
  components: {
    pageMain,
    pageHeader,
  },
  data() {
    return {
      tableData: [{}, {}],
      userInfo: {},
      tabsCurrent: "info",
      imageErrorSrc:
        "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png",
    };
  },
  created() {
    let query = this.$route.query;
    let { userid } = query;

    if (userid) {
      API.user
        .info({
          id: userid,
        })
        .then((res) => {
          this.userInfo = res.data.userInfo;
          console.log(this.userInfo);
        })
        .catch((err) => {
          console.log("失败", err);
        });
    }
  },
};
</script>

<style scoped>
.user-info {
  margin-bottom: 15px;
}
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}
.descriptions {
  margin-top: 0px;
}
.descriptions-extra {
  gap: 15px;
  padding-right: 8px;
}
</style>
